import React from 'react'
import classes from './Meal.module.css'
import Counter from '../../../UI/Counter/Counter'

function Meal(props) {
    return (
        <div className={classes.meal}>
            <div className={classes.imgBox}>
                <img src={props.meal.img} alt='hbb'/>
            </div>

            <div className={classes.descBox}>
                <h2 className={classes.title}>{props.meal.title}</h2>
                <p className={classes.desc}>{props.displayDesc ? props.meal.desc : ""} </p>
                <div className={classes.priceAndCount} >
                    <span className={classes.price}>{props.meal.price}</span>
                    <Counter 
                        className={classes.count}
                        meal = {props.meal}
                    />
                </div>
            </div>
        </div>
    )
} 

export default Meal